<template xmlns="http://www.w3.org/1999/html">
    <font-net-frame ref="frameRef" :query="config.page">
        <!-- form-header -->
        <template #title>
            <sea-table-title title="数据字典" subtitle="说实话，直接改数据库更快"></sea-table-title>
        </template>

        <!-- form-buttons -->
        <template #buttons>
            <el-button plain title="Excel导入" @click="onAction('import')"><i class="fa fa-fw fa-upload"></i>
            </el-button>
            <el-button plain title="新增" @click="onAction('new')"><i class="fa fa-plus"></i></el-button>
        </template>

        <!-- form-data -->
        <template #default="{list}">
            <el-table :data="list" border>
                <el-table-column prop="id" width="96" label="#"></el-table-column>
                <sea-col-link property="columnAlias" label="字段名" width="200" :click="onAction"></sea-col-link>
                <el-table-column label="Key" width="300">
                    <template #default="{row}">
                        <span>{{ row.tableName }}.{{ row.columnName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="默认效果" width="200">
                    <template #default="{row}">
                        <span :class="row.defaultStyle">{{ row.columnAlias }}</span>
                    </template>
                </el-table-column>
                <sea-col-input property="defaultStyle" label="默认样式" :change="onAction"></sea-col-input>

                <!--操作栏-->
                <sea-table-actionbar width="180" :action="onAction" :buttons="buttons"></sea-table-actionbar>
            </el-table>

            <!-- drawer -->
            <el-dialog class="no-padding margin" v-model="create_dialog.open"
                       :width="create_dialog.width" :title="create_dialog.title">
                <create :succeed="onSucceed"></create>
            </el-dialog>
            <el-dialog class="no-padding margin" v-model="modify_dialog.open"
                       fullscreen :title="modify_dialog.title">
                <modify :active="modify_dialog.open" :object="modify_dialog.item"></modify>
            </el-dialog>
        </template>

    </font-net-frame>
</template>

<script setup lang="ts">
import create from "./create.vue";
import modify from "./modify.vue";
import {onMounted, reactive, ref} from "vue";
import config from "./config";
import Layers from "@/lang/layers/index.js";

// frame-ref
const frameRef = ref();

// 操作栏
const buttons = ref([
    {type: 'btn', evt: 'del', label: '删除', title: '删除数据字典'}
]);

// 创建界面参数
const create_dialog = reactive({
    // 是否展开
    open: false,
    // 标题栏
    title: '新建',
    // 宽度
    width: '50%',
    // 弹窗联动元素
    item: undefined
});

// 修改界面参数
const modify_dialog = reactive({
    // 是否展开
    open: false,
    // 标题栏
    title: '管理键值',
    // 宽度
    width: '50%',
    // 弹窗联动元素
    item: undefined
});

/**
 * 操作成功回调
 */
const onSucceed = () => {
    create_dialog.open = false;
    frameRef.value.reload();
}

/**
 * 事件分发
 *
 * @param evt   事件名称
 * @param row   行级数据，可以直接修改
 * @param arg   发生变动的数据信息
 */
const onAction = (evt, row = undefined, arg = undefined) => {
    if (evt === 'new') {
        create_dialog.open = true;
    } else if (evt === '$columnAlias') {
        modify_dialog.open = true;
        modify_dialog.item = row;
    } else if (evt === 'del') {
        config.remove(row).then(result => {
            if (result.code === 0) {
                Layers.succeed();
                frameRef.value.reload();
            }
        });
    } else if (evt === 'import') {
        Layers.warn('功能建设中！');
    } else if (evt === '$edit') {
        // 行级编辑
        arg.id = row.id;
        config.modify(arg).then(result => {
            if (result.code === 0) {
                Layers.succeed();
                row[arg.field] = arg.value;
            }
        });
    } else {
    }
}

</script>
